<script lang="ts">
export default {
  name: 'Test-test2-2'
}
</script>

<template>
  <h2>用户反馈表单</h2>
  <div class="note">
    <h3>要求：</h3>
    <p>
      1. 创建一个用户反馈表单，包含姓名 (input)，反馈类型 (select)，反馈详情
      (textarea)，以及是否同意接受邮件通知 (radio)，所有表单项需与响应式数据绑定。
    </p>
    <p>2. 根据表单内容，提交反馈时使用条件渲染显示提交的反馈信息。</p>
    <p>3. 使用计算属性显示已输入的字符数量限制，且在 textarea 输入框中动态显示剩余可输入字符。</p>
    <p>4. 提交按钮控制反馈信息的显示，通过点击提交按钮处理事件，显示表单结果。</p>
    <p>5. 反馈信息提交后，表单清空，用户可以继续提交新的反馈。</p>
  </div>
  <div class="note">
    <h3>要求的功能点：</h3>
    <p>
      1. 表单输入绑定：姓名 (input)、反馈类型 (select)、反馈详情 (textarea)、邮件通知 (radio)
      的值与响应式数据绑定。
    </p>
    <p>2. 字符计数：使用计算属性显示反馈详情中可输入字符的剩余数量，并在 textarea 中实时更新。</p>
    <p>3. 条件渲染：根据用户提交的反馈信息，在提交后显示反馈结果。</p>
    <p>4. 事件处理：处理表单的提交事件，并显示提交的信息。</p>
    <p>5. 表单重置：在提交反馈后，表单清空，允许用户继续输入新的反馈。</p>
  </div>

  <div class="group">
    <h2>用户反馈表单</h2>

    <!-- 姓名输入 -->
    <label for="name">姓名：</label>
    <input id="name" type="text" placeholder="请输入您的姓名" v-model="userFeedBack.name" />

    <!-- 反馈类型选择 -->
    <label for="feedback-type">反馈类型：</label>
    <select id="feedback-type" v-model="userFeedBack.feedbackType">
      <option value="">请选择反馈类型</option>
      <option value="complaint">投诉</option>
      <option value="suggestion">建议</option>
      <option value="other">其他</option>
    </select>

    <!-- 反馈详情 -->
    <label for="details">反馈详情：</label>
    <textarea
      id="details"
      placeholder="请输入您的反馈内容"
      v-model="userFeedBack.details"
      maxlength="100"
    ></textarea>
    <p>剩余字符：{{ restedStr }}</p>

    <!-- 邮件通知 -->
    <p>是否同意接受邮件通知？</p>
    <label>
      <input type="radio" name="email-notify" value="yes" v-model="userFeedBack.emailNotify" /> 是
    </label>
    <label>
      <input type="radio" name="email-notify" value="no" v-model="userFeedBack.emailNotify" /> 否
    </label>

    <!-- 提交按钮 -->
    <button type="submit" @click="submitForm" >提交反馈</button>

    <!-- 提交结果展示: 条件渲染 - 提交后显示结果 -->
    <div v-if="userFeedBack.submit" >
      <h3>反馈详情</h3>
      <p>姓名：{{ userFeedBack.name }}</p>
      <p>反馈类型：{{ userFeedBack.feedbackType }}</p>
      <p>反馈内容：{{ userFeedBack.details }}</p>
      <p>是否同意接收通知：{{ userFeedBack.emailNotify }}</p>
      <!-- 增加一个重置按钮 -->
      <button @click="resetForm">重置表单</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

// 创建用户反馈表单
let userFeedBack = ref({
  name: '',
  feedbackType: '',
  details: '',
  emailNotify: '',
  submit: false
})

// 计算属性计算 - 显示剩余可输入字符
const restedStr = computed(() => {
  return 100 - userFeedBack.value.details.length
})

// 表单重置：表单情况，允许继续输入反馈
const resetForm = () => {
  userFeedBack.value = {
    name: '',
    feedbackType: '',
    details: '',
    emailNotify: '',
    submit: false
  }
}

// 提交表单
const submitForm = ()=>{
  if(userFeedBack.value.name && userFeedBack.value.feedbackType && userFeedBack.value.details && userFeedBack.value.emailNotify){
    userFeedBack.value.submit = true
  }else{
    alert('请填写所有必填字段')
  }
}
</script>

<style scoped>
div {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type='text'],
select,
textarea {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

textarea {
  height: 100px;
  resize: none;
}

button {
  background-color: #28a745;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

button:hover {
  background-color: #218838;
}

p {
  margin-top: 0;
}

h3 {
  margin-top: 20px;
}

input[type='radio'] {
  margin-right: 5px;
}

.feedback-result {
  border-top: 1px solid #ccc;
  margin-top: 20px;
  padding-top: 20px;
}

body {
  padding: 20px;
}
h2 {
  color: red;
}
h3 {
  color: rgb(220, 85, 85);
}
h4 {
  color: skyblue;
}
.hr-style {
  border: 3px solid gold;
  margin: 20px 0;
}
.group {
  border: 4px solid rgb(102, 215, 85);
  margin: 10px;
  padding: 10px;
}
.group3 {
  border: 2px solid rgb(64, 163, 199);
  margin: 10px;
  padding: 10px;
}
.note {
  margin: 10px;
  padding: 10px;
  border: 3px solid rgb(221, 121, 202);
}
.note p {
  color: rgb(226, 106, 204);
  font-weight: bold;
}
</style>
